.order-detail-container {
  width: 100%;
  height: 100vh;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.loading-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  margin-top: 88rpx; /* 导航栏高度 */

  .loading-text {
    font-size: 28rpx;
    color: #999;
  }
}

.order-content {
  flex: 1;
  padding: 20rpx;
  padding-top: 108rpx; /* 导航栏高度(88rpx) + 间距(20rpx) */
  padding-bottom: 40rpx;
  box-sizing: border-box;
  overflow-y: auto;
  height: 100%;
}

/* 订单状态卡片 */
.status-card {
  background: #e8f5e9;
  border-radius: 16rpx;
  padding: 40rpx 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);

  .status-icon {
    margin-right: 30rpx;

    .status-emoji {
      font-size: 64rpx;
      line-height: 1;
    }
  }

  .status-info {
    flex: 1;
    display: flex;
    flex-direction: column;

    .status-text {
      font-size: 36rpx;
      font-weight: bold;
      color: #4caf50;
      margin-bottom: 10rpx;
    }

    .status-desc {
      font-size: 26rpx;
      color: #666;
    }
  }
}

/* 信息区块 */
.info-section {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

  .section-title {
    display: flex;
    align-items: center;
    margin-bottom: 25rpx;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #f0f0f0;

    .title-icon {
      font-size: 32rpx;
      margin-right: 12rpx;
    }

    .title-text {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
    }
  }
}

/* 信息项 */
.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;

  &:last-child {
    border-bottom: none;
  }

  .info-label {
    font-size: 28rpx;
    color: #666;
    flex-shrink: 0;
    margin-right: 30rpx;
  }

  .info-value {
    font-size: 28rpx;
    color: #333;
    text-align: right;
    word-break: break-all;
  }

  .info-value-row {
    display: flex;
    align-items: center;
    gap: 15rpx;
  }

  .pickup-code {
    font-size: 36rpx;
    font-weight: bold;
    color: #ff5722;
    letter-spacing: 4rpx;
  }

  .copy-btn {
    font-size: 24rpx;
    color: #2196f3;
    padding: 8rpx 16rpx;
    background: #e3f2fd;
    border-radius: 8rpx;
    flex-shrink: 0;
  }
}

/* 配送地址 */
.address-content {
  .address-text {
    display: block;
    font-size: 28rpx;
    color: #333;
    line-height: 1.6;
    margin-bottom: 20rpx;
  }

  .call-btn {
    width: 100%;
    padding: 20rpx;
    background: #4caf50;
    color: white;
    border-radius: 12rpx;
    font-size: 28rpx;
    border: none;

    &::after {
      border: none;
    }

    &:active {
      background: #45a049;
    }
  }
}

/* 订单商品 */
.order-items {
  .order-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f5f5f5;

    &:last-child {
      border-bottom: none;
    }

    .item-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin-right: 20rpx;

      .item-name {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 8rpx;
      }

      .item-specs {
        font-size: 24rpx;
        color: #999;
      }
    }

    .item-price-info {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      flex-shrink: 0;

      .item-quantity {
        font-size: 24rpx;
        color: #999;
        margin-bottom: 8rpx;
      }

      .item-price {
        font-size: 28rpx;
        color: #ff5722;
        font-weight: bold;
      }
    }
  }
}

/* 金额明细 */
.amount-items {
  .amount-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;

    .amount-label {
      font-size: 28rpx;
      color: #666;
    }

    .amount-value {
      font-size: 28rpx;
      color: #333;

      &.discount {
        color: #ff5722;
      }

      &.final {
        font-size: 36rpx;
        font-weight: bold;
        color: #ff5722;
      }
    }

    &.total {
      border-top: 1rpx solid #f0f0f0;
      margin-top: 10rpx;
      padding-top: 25rpx;
    }
  }
}

.payment-method {
  margin-top: 20rpx;
  padding-top: 20rpx;
  border-top: 1rpx solid #f0f0f0;
  display: flex;
  align-items: center;

  .payment-label {
    font-size: 26rpx;
    color: #666;
    margin-right: 10rpx;
  }

  .payment-value {
    font-size: 26rpx;
    color: #333;
  }
}

/* 订单备注 */
.remark-content {
  .remark-text {
    display: block;
    font-size: 28rpx;
    color: #333;
    line-height: 1.6;
    background: #f8f9fa;
    padding: 20rpx;
    border-radius: 8rpx;
  }
}

/* 订单时间线 */
.timeline {
  position: relative;
  padding-left: 40rpx;

  .timeline-item {
    position: relative;
    padding-bottom: 40rpx;

    &:last-child {
      padding-bottom: 0;

      &::after {
        display: none;
      }
    }

    &::after {
      content: '';
      position: absolute;
      left: -30rpx;
      top: 30rpx;
      width: 2rpx;
      height: calc(100% - 10rpx);
      background: #e0e0e0;
    }

    .timeline-dot {
      position: absolute;
      left: -36rpx;
      top: 8rpx;
      width: 14rpx;
      height: 14rpx;
      border-radius: 50%;
      background: #4caf50;
      border: 3rpx solid white;
      box-shadow: 0 0 0 2rpx #4caf50;
    }

    .timeline-content {
      .timeline-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8rpx;

        .timeline-status {
          font-size: 28rpx;
          color: #333;
          font-weight: 500;
        }

        .timeline-operator {
          font-size: 24rpx;
          color: #999;
        }
      }

      .timeline-time {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

.bottom-placeholder {
  height: 40rpx;
}
